<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
	    <meta name="viewport" content="width=device-width, initial-scale=1">
		<title>服务订单详情</title>
		<!-- 引入字体图标 -->
		<link rel="stylesheet" type="text/css" href="js/font-awesome/css/font-awesome.css"/>
		<!-- 引入全局配置 -->
	    <link rel="stylesheet" type="text/css" href="css/start.css">
		<link rel="stylesheet" type="text/css" href="css/common.css"/>
		<link rel="stylesheet" type="text/css" href="css/serviceOrderDetails.css"/>
		<script src="js/common/jquery-1.12.2.js" charset="utf-8"></script>
		<script type="text/javascript"  src="js/common/baseUrl.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.5.7/es5-shim.min.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.5.7/es5-sham.min.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/json3/3.3.2/json3.min.js"></script>
		<script type="text/javascript" src="js/artTemplate/template.js"></script>
				<script type="text/javascript"  src="js/common/serviceOrderDetails.js"></script>
	</head>
	<body class="serviceorderbox">
		<!-- 头部 -->
    <div id="header">
        <div class="top">
            <div class="top-left">
                <i class="fa fa-map-marker "></i>
                <a href="javascript:void(0)" class="one">广州</a>
                <a href="javascript:void(0)" class="two">切换城市</a>
            </div>
            <div class="top-right">
                <a class="one">
                    <i class="fa fa-user"></i> 朱莉
                </a>
                <a href="javascript:void(0)">退出</a>
                <a href="javascript:void(0)">帮助中心</a>
                <a href="javascript:void(0)">网站导航</a>
                <a href="javascript:void(0)">手机APP</a>
            </div>
        </div>
    </div>
    <!--服务订单详情内容-->
    <div id="serviceorderdetail">
		<!--搜索框-->
    	<div class="searchBox">
			<div class="search">
				<div class="search-left">
					<span class="husheng">互生</span>
					<span class="vertical">|</span>
					<span class="evaluate">休闲娱乐</span>
				</div>
				<div class="search-right">
					<div class="one">
						<input type="text" name="search" id="search" value="" placeholder="输入商家名称、分类或地区" />
						<a href="javascript:void(0)">
							<i class="fa fa-search"></i>
						</a>
					</div>
					<div class="two">
						<a href="#">运动健身</a>
						<a href="#">瑜伽</a>
						<a href="#">羽毛球</a>
						<a href="#">CS</a>
						<a href="#">农家乐</a>
						<a href="#">私人影院</a>
					</div>
				</div>
			</div>
		</div>
		<div class="ordercontent">
			<div class="midbox" id="midbox">
				<script type="text/html" id="test">
				<!--订单详情-->
	    		<div class="top">订单详情</div>
	    		<div class="status">
	    			<span class="current">当前状态:</span>
	    			<span class="wait">待消费</span>
	    		</div>
	    		<div class="code">消费码</div>
	    		<div class="barCode">
	    			<p class="bar">条形码:
	    				<span>{{detailOrder.consumptionCode}}</span>
	    				<span class="deadlinetime">{{detailOrder.validEndTime}}到期</span>
	    			</p>
	    			<p class="tips">可到门店向商家出示条形码消费<p>

	    		</div>
	    		<!--订单信息-->
	    		<div class="orderinfor">订单信息</div>
	    		<div class="container">
	    			<div class="detailinfor">
						<div class="ordernum left">
							订单编号:
							<span>{{detailOrder.id}}</span>
						</div>
						<div class="style left">
							付款方式:
							<span>{{detailOrder.type}}</span>
						</div>
						<div class="paytime left">
							付款时间:
							<span> {{detailOrder.paySuccesstime}}</span>
						</div>
						<div class="time left">
							下单时间:
							<span> {{detailOrder.orderCreateTime}}</span>
						</div>
					</div>
					<div class="detailinfor2">
						<div class="tatol left">
							总价:
							<img src="img/jinbi.png"/>
							<span class="money">{{detailOrder.orderAmount}}</span>
						</div>
						<div class="shopcoupon left">
							商家优惠券:
							<img src="img/惠Circle.png"/>
							<span class="money">-{{detailOrder.shopCouponsDiscount}}</span>
						</div>
						<div class="dikoucoupon left">
							消费抵扣券:
							<img src="img/yhq1.png"/>
							<span class="green">-{{detailOrder.ptCouponsDiscount}}</span>
						</div>
						<div class="shifu left">
							实付:
							<img src="img/jinbi.png"/>
							<span class="money">{{detailOrder.payAmount}}</span>
						</div>
					</div>
					<div class="detailinfor3">
						<div class="jifen left">
							消费积分:
							<img src="img/yhq3.png"/>
							<span class="pv">{{detailOrder.perPoint}}</span>
						</div>
					</div>
	    		</div>
	    		<!--服务人员信息-->
	    		<div class="servicepeopleinfor">
	    			<span class="peopleinfor">服务人员信息</span>
	    			<span class="warning">重要提示:服务人员不能提供服务时,可协商变更</span>
	    		</div>
	    		<!--服务人员头像-->
	    		<div class="peoplePicture">
						{{each staff item}}
	    			<div class="picturebox">
	    				<div class="img">
	    					<img src="{{picUrl}}{{item.headUrl}}" style="border-radius:50%;"/>
	    				</div>
	    				<span class="zhangsan">{{item.jobName}}</span>
	    			</div>
	    		{{/each}}
	    		</div>
	    		<!--上门服务信息-->
	    		<div class="doorservice">
	    			<div class="doorone">
	    				<div class="distance">
	    					<span class="one">上门联系人:</span>
	    					<span class="two">李四</span>
	    				</div>
	    				<div class="distance2">
	    					<span class="one">上门服务时间:</span>
	    					<span class="two">2018-10-21 16:00-18:00</span>
	    				</div>
	    			</div>
	    			<div class="doortwo">
	    				<div class="distance">
	    					<span class="one">上门服务地址:</span>
	    					<span class="two">马场路36号太阳新天地购物中心二楼</span>
	    				</div>
	    				<div class="distance2">
	    					<span class="one">上门联系电话:</span>
	    					<span class="two">133813836365</span>
	    				</div>
	    			</div>
	    		</div>

	    		<!--服务项目-->
	    		<div class="serive">
	    			<span class="item">服务项目</span>
	    			<span class="number">数量</span>
	    			<span class="totalprice">总价</span>
	    		</div>
	    		<!--服务项目详情-->
	    		<div class="serviceiteminfor">
	    			<div class="img">
	    				<img src="img/2.png"/>
	    			</div>
	    			<div class="iteminfor">
	    				<p class="one">{{detailOrder.goodsName}}</p>
	    				<div class="two">
	    					<div class="two1 left">
	    						<img src="img/yhq2.png"/>
	    						<span class="money">{{detailOrder.goodsUintPrice}}</span>
	    					</div>
	    					<div class="two2 left">
	    						<img src="img/yhq3.png"/>
	    						<span class="pv">{{detailOrder.goodsPerPoint}}</span>
	    					</div>
	    					<div class="two3 left">{{detailOrder.buyCount}}</div>
	    					<div class="two4 left">
	    						<img src="img/yhq2.png"/>
	    						<span class="money">{{detailOrder.orderAmount}}</span>
	    					</div>
	    				</div>
	    				<div class="three">
	    					<div class="three1 left">
	    						<img src="img/随时退.png"/>
	    						<span class="sui">随时退</span>
	    					</div>
	    					<div class="three2 left">
	    						<img src="img/随时退.png"/>
	    						<span class="sui">出售不退</span>
	    					</div>
	    				</div>
	    			</div>
	    		</div>
	    		<!--					********店家信息*********-->
				<div class="shop">
					<p class="swap">
						<span class="work">{{detailOrder.shopName}}</span>
						<span class="worknum">({{detailOrder.entResno}})</span>
					</p>
					<p class="swap">
						<span class="location">{{detailOrder.shopAddress}}</span>
						<img src="img/map.png"/>
						<a  class="map" href="#" >查看地图</a>
					</p>
				</div>
				<div class="bot">
					<div class="right">
			    		订单金额:
			    		<img src="img/yhq2.png"/>
			    		<span class="money">{{detailOrder.orderAmount}}</span>
		    		</div>
				</div>
				<div class="bot">
					<div class="right">
		    			商家优惠券:
		    			<img src="img/惠Circle.png"/>
		    			<span class="money">-{{detailOrder.shopCouponsDiscount}}</span>
		    		</div>
				</div>
				<div class="bot">
					<div class="right">
		    			消费抵扣券:
		    			<img src="img/yhq1.png"/>
		    			<span class="green">-{{detailOrder.ptCouponsDiscount}}</span>
		    		</div>
				</div>
				<div class="bot">
					<div class="right">
		    			消费积分:
		    			<img src="img/yhq3.png"/>
		    			<span class="pv">{{detailOrder.perPoint}}</span>
		    		</div>
				</div>
						<div class="bot1">
							<div class="right">
				    			实付金额:
				    			<img src="img/yhq2.png"/>
				    			<span class="bigmoney">{{detailOrder.payAmount}}</span>
				    		</div>
						</div>
						<div class="button">
							<div class="apply" onclick="goTuikuan({{detailOrder.id}})">
								申请退款
							</div>
						</div>
				</script>
			</div>
		</div>
    </div>
     <!--			*********底部********-->
			<div class="foot" id="foot">
				<p>
					<strong>客服热线： </strong>
					<a href="javascript:void(0)">
						0755-83344111
					</a>
					<span class="foot-adition">2013-2018 </span>
					<span>
						深圳市互生电子商务有限公司
					</span>
					<span>
						粤ICP备案号14100052号
					</span>
				</p>
		    </div>
	</body>
</html>
